<template>
	<view>
		<view class="index-box">
			<!-- #ifdef APP-NVUE -->
			<text class="index-text">当前页面为 nvue 页面引用 jh-uni-ui 组件示例</text>
			<!-- #endif -->
			<!-- #ifndef APP-NVUE -->
			<text class="index-text">当前页面为 vue 页面引用 jh-uni-ui 组件示例</text>
			<!-- #endif -->
		</view>
		<uniSection title="基础组件" type="line"></uniSection>
		<uniList>
			<uniListItem v-for="(view, index) in views" :key="index" :title="view.name" link :to='`/pages/${platform}/${view.url}/index`' />
		</uniList>

		<uni-section title="功能组件" type="line"></uni-section>
		<uni-list>
			<uni-list-item v-for="(func, index) in functionals" :key="index" :title="func.name" link :to='`/pages/${platform}/${func.url}/index`' />
		</uni-list>

	</view>
</template>

<script>
	import {uniSection, uniList, uniListItem} from "@dcloudio/uni-ui"

    export default {
		components:{
			uniSection,
			uniList,
			uniListItem
		},
		data(){
			return {
				views:[
					{name:'button-comp 按鈕', url:'button-comp'},
					{name:'bottom-line 到达底部提示', url:'bottom-line'},
					{name:'empty-data 提示空数据', url:'empty-data'},
				],
				functionals:[
					{name:'picker-select-comp 下拉选择框', url:'picker-select-comp'},
					{name:'calendar-comp 日历组件', url:'calendar-comp'},
					{name:'input-comp 输入控件', url:'input-comp'},
					{name:'upload-pic 文件上传', url:'upload-pic'},
					{name:'table-comp table 表格', url:'table-comp'},
					{name:'search-head 头部搜索', url:'search-head'},
					{name:'approve-modal 顶部弹出', url:'approve-modal'},
					{name:'editor-comp 富文本', url:'editor-comp'},
					{name:'result-comp 结果', url:'result-comp'},
					{name:'modal-comp 对话框', url:'modal-comp'},
					{name:'select-box 弹窗选择', url:'select-box'},

				],
				// #ifdef APP-NVUE
				platform:'nvue',
				// #endif
				// #ifndef APP-NVUE
				platform:'vue'
				// #endif
			}
		},

    }
</script>

<style scoped lang="scss">
	@import '@/common/uni-nvue.scss';
	.index-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		height: 50px;
		padding: 0 15px;
	}

	.index-text {
		font-size: 14px;
		color: #666;
	}
</style>
